<template>
  <div class="hot-box">
    <div class="hot-title">
      <div class="everyday">
        <img src="../../assets/image/圆角矩形 4.png" alt="" />
      </div>
      <div class="everyday-title">
        <img src="../../assets/image/火.png" alt="" />
        <img src="../../assets/image/每日推荐.png" alt="" />
      </div>
      <a href="#">
        <div class="watch-all">查看所有主持人</div>
      </a>
    </div>
    <div class="hot-content">
      <ul id="host-list" v-for="(item,index) in recommendList" :key="item.id">
        <li>
          <div class="hot-content-img" @click="jump(index)">
            <!-- <a href="http://localhost:8080/#nb/style" target="_blank"> -->
              <img
                :src="item.pic"
                alt=""
                width="175px"
                height="238px"
              />
            <!-- </a> -->
          </div>
          <div class="li-recommend">
            <img src="../../assets/image/1335.png" alt="" />
          </div>
          <div class="li-recommend">
            <img src="../../assets/image/星推荐.png" alt="" />
          </div>
          <div class="hot-content-desc">
            <p class="hot-content-name">{{item.name}}</p>
            <p class="hot-content-price">{{item.price}}</p>
          </div>
        </li>
        
      </ul>
    </div>
  </div>
</template>

<script>
import api from "../../api"
import EventBus from '../../utils/eventbus.js'
export default {
  name: "HotRecommend",
  data(){
      return{
          recommendList:[]
      }
  },
  methods:{
    jump(index){
      var data=this._data.recommendList[index];
      // console.log(this._data.recommendList,index);
      // EventBus.$emit("listDetail",this._data.recommendList[index])
      // console.log(this._data.recommendList[index]);
      // this.$router.push('/style')
      this.$router.push({name:'Style',params:data})

    }
  },
  mounted(){
      api.recommend().then((res)=>{
          // console.log(res.data);
          this.recommendList=res.data.list
      })
  }
};
</script>

<style scoped>
.hot-box {
  width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.hot-title {
  width: 1000px;
  height: 50px;
  margin-top: 40px;
  margin-bottom: 10px;
  overflow: hidden;
  position: relative;
  top: 5px;
}
.hot-content {
  width: 1000px;
  margin-left: 10px;
  margin: 0 auto;
}
.everyday {
  width: 176px;
  height: 50px;
  float: left;
}
.everyday img {
  width: 100%;
  height: 100%;
}
.everyday-title {
  position: absolute;
  top: 13px;
  left: 10px;
}
.watch-all {
  width: 1029px;
  height: 50px;
  float: left;
  line-height: 50px;
  text-align: right;
  border-bottom: 5px solid #eadbc5;
  box-sizing: border-box;
  margin-left: -5px;
}
.hot-content ul {
  margin-right: -25px;
}
.hot-content li {
  width: 175px;
  height: 238px;
  margin-right: 25px;
  margin-bottom: 30px;
  float: left;
  position: relative;
}
/* 每日推荐列表 */
.hot-content-img {
  width: 175px;
  height: 238px;
  position: relative;
}
#host-list {
  position: relative;
}
.li-recommend {
  position: absolute;
  top: 0;
  left: 0;
}
.hot-content-desc {
  height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  bottom: 0px;
  left: 0;
  width: 175px;
}
.hot-content-name {
  width: 68px;
  height: 40px;
  float: left;
  line-height: 40px;
  color: white;
  box-sizing: border-box;
}
.hot-content-price {
  height: 40px;
  float: left;
  text-align: right;
  line-height: 40px;
  color: white;
}
</style>